<template>
  <div>123</div>
  <render ref="renderSelf"></render>
  <render1></render1>
  <div>{{ userRef }}</div>
  <div>
    <slot name="footer">123</slot>
  </div>
</template>

<script>
import { ref, toRefs, toRef } from "@vue/reactivity";
// , readonly
import {
  onErrorCaptured,
  onMounted,
  onRenderTracked,
  provide,
  watch,
} from "@vue/runtime-core";
import render from "./render.vue";
import render1 from "./render1.vue";
export default {
  components: {
    render,
    render1,
  },
  emits: ["load"],
  props: {
    user: {
      type: [String, Boolean],
      default: "2",
    },
  },
  provide: {
    self: function () {
      let that = this;
      return function () {
        console.log(that, "demo1 this 实例");
        return that;
      };
    },
  },
  setup(props, context) {
    const { user } = toRefs(props);
    // const str = ref("North Pole1");
    provide("location", "North Pole1");

    provide("geolocation", {
      longitude: 90,
      latitude: 135,
    });
    // setup 的顶部使用了 toRefs。这是为了确保我们的侦听器能够根据 user prop 的变化做出反应。
    const userRef = ref("");
    const renderSelf = ref(null);
    const title = toRef(props, "title");
    // title 是可选的 prop，则传入的 props 中可能没有 title
    console.log(title.value);
    // Attribute (非响应式对象，等同于 $attrs)
    console.log(context.attrs);

    // 插槽 (非响应式对象，等同于 $slots)
    console.log(context.slots.footer());

    // 触发事件 (方法，等同于 $emit)
    console.log(context.emit);
    // context.emit("load", "demo1 create 加载完成");
    // 暴露公共 property (函数)
    console.log(context.expose);
    onMounted(() => {
      console.log(renderSelf.value, "组件实例render1");
    });
    onErrorCaptured((err) => {
      console.log(err, "err");
    });
    onRenderTracked((hook) => {
      console.log(hook, "hook");
    });
    onRenderTracked((hookdeg) => {
      console.log(hookdeg, "hookdeg");
    });
    watch(
      user,
      function (n) {
        userRef.value = n;
      },
      { immediate: true }
    );
    return {
      userRef,
      renderSelf,
    };
  },
};
</script>

<style></style>
